import React, { Component } from 'react'
import { Icon, Form, Input, Button } from 'antd'
import { login } from '../../actions/user'
import { connect } from 'react-redux'
import actionType from '../../actions/actionTypes'
import { Fragment } from 'react'
class Center extends React.Component(
    LoginUser() {
    componentData.formConfig.validateFields((err, values) => {
        if (!err) {
            const password = btoa(encodeURI(`${values.Pwd}Shenbo123`));
            const userLoginData = {
                UserName: values.UserName,
                Pwd: password
            }
            dispatch({
                type: actionType.START_LOGIN,
                payload: userLoginData
            })
            login(userLoginData)
        }
    });
}
    render() {
    const { getFieldDecorator } = componentData.formConfig;
    retunr(
            <Fragment>
<div className="login-box">
    <div className="tree">
        <img src={componentData.imgUrl.logoPlant} className="img-fluid" />
    </div>
    <div className="slogan">
        安全无小事<br /><span className="yellow">管理</span>少事故
                    </div>
    <div id="earth" className="move">
        <img src={componentData.imgUrl.logoPeopleUrl} className="img-fluid" />
    </div>

    <div className="login">
        <div className="login-logo">
            <img src={componentData.imgUrl.logoUrl} className="img-fluid" />
        </div>
        <div className="login-other">
            <div onclick='toQzoneLogin()'><img src={componentData.imgUrl.logoIconQQ} /></div>
            <div onclick='toweChat()'><img src={componentData.imgUrl.logoIconChart} /></div>
            <div><img src={componentData.imgUrl.logoIconSine} /></div>
        </div>
        <div className="hr"><span>或</span></div>
        <div className="login-form">
            <Form className="login-form">
                <Form.Item>
                    {
                        getFieldDecorator('UserName', {
                            rules: [{ required: true, message: '请输入用户名' }]
                        })(<Input
                            prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                            placeholder="请输入用户名"
                        />)
                    }
                </Form.Item>
                <Form.Item>
                    {getFieldDecorator('Pwd', {
                        rules: [{ required: true, message: '请输入密码' }]
                    })(
                        <Input
                            prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                            type="password"
                            placeholder="请输入密码"
                        />
                    )}

                </Form.Item>
                <Form.Item>
                    <Button type="primary" htmlType="submit" className="login-form-button login-form-btn-submit" onClick={() => LoginUser()}>登陆</Button>
                </Form.Item>
            </Form>
        </div>
        <div className="login-regist">
            没有帐号？<span id="ToRegist">立即注册</span>
        </div>
    </div>

    <div className="regist">
        <div className="regist-title">
            手机注册<span><img src={componentData.imgUrl.logoUrl} height="40px" /></span>
        </div>
        <div className="regist-form">
            <form method="POST" action="">
                <code className="check_reg_phone"></code>
                <div className="input-group mb-3">
                    <div className="input-group-prepend">
                        <span className="input-group-text">
                            <span className="fa fa-mobile text-success"></span>
                        </span>
                    </div>
                    <input type="text" className="form-control" name="regphone" id="regphone" placeholder="手机号码" />
                </div>
                <code className="check_reg_pwd"></code>
                <div className="input-group mb-3">
                    <div className="input-group-prepend">
                        <span className="input-group-text">
                            <span className="fa fa-unlock-alt text-success"></span>
                        </span>
                    </div>
                    <input type="password" className="form-control" name="regpwd" id="regpwd" placeholder="密码" />
                </div>
                <code className="check_reg_pwd2"></code>
                <div className="input-group mb-3">
                    <div className="input-group-prepend">
                        <span className="input-group-text">
                            <span className="fa fa-unlock-alt text-success"></span>
                        </span>
                    </div>
                    <input type="password" className="form-control" id="regcheckpwd" placeholder="确认密码" />
                </div>
                <code className="check_reg_code"></code>
                <div className="input-group mb-3">
                    <input type="text" className="form-control" placeholder="手机验证码" id="code" name="code" />
                    <div className="input-group-append">
                        <button type="button" className="input-group-text text-success getcode">获取验证码</button>
                    </div>
                </div>
                <button type="button" id="regist" className="btn btn-success btn-block">注册</button>
            </form>
        </div>
        <div className="otherLogin">
            <div className="qq">
                <img src={componentData.imgUrl.logoQQ} onclick='toQzoneLogin()' className="img-fluid" />
            </div>
            <div className="wx">
                <img src={componentData.imgUrl.logoChart} onclick='toweChat()' className="img-fluid" />
            </div>
        </div>
        <div className="login-login">
            <span id="otherLogin">快捷登录</span>
            <span id="phoneLogin">手机注册</span>
            <span id="ToLogin">返回登录</span>
        </div>
    </div>
</div>
            </Fragment >
        )
    }
)
export const Center = (componentData) => {
    const dispatch = useDispatch()

    function 

}

